<script lang='ts' name='Child1'>  

    //选项式的API
    export default {
        data(){
            return {
                counter:1
            }
        },
        methods:{
            counterPlus(){
                this.counter++;
            }
        },
        beforeCreate() {
            console.log("组件钩子函数  beforeCreate");   
        },
        created(){
            console.log("组件钩子函数  created");   
        },
        beforeMount() {
            console.log("组件钩子函数  beforeMount");   
        },
        mounted() {
            console.log("组件钩子函数  mounted");   
        },
        beforeUpdate() {
            console.log("组件钩子函数  beforeUpdate");
        },
        updated() {
            console.log("组件钩子函数  updated");
        },
        beforeDestroy() {
            console.log("组件钩子函数  beforeDestroy");
        },
        destroyed() {
            console.log("组件钩子函数  destroyed");
        },
    }
 



</script>  
  
<template>  
   <div class="child">

    <h3>第一个组件</h3>
    <button @click="counterPlus">计数器{{ counter }}</button>

   </div>
</template>  
  
<style scoped>  

    .child{

        margin: 10px;
        background-color: skyblue;
        width: 300px;
        height: 300px;
    }


</style>  